<template>
	<view style="padding:20rpx">
		<!-- <view style="float:left; width:46vw;">
			<view v-for="(item,key) in WorksLeftList" :key="key" class="waterfall-item">
				<view class="" style="position: relative;" @click="$common.goNavPage('/works/details?WorksID='+item.WorksID)">
					<image :src="item.WorksUrls[0]" mode="widthFix"
						:style="{width:'100%', display: 'block' }"></image>
					<view class=""
						style="position: absolute;bottom: 20rpx;right: 20rpx;padding: 2rpx 12rpx;background-color: rgba(0,0,0,0.4);color:#fff;border-radius: 50rpx;font-size: 20rpx;">
						<uni-icons type="eye" size="12" color="#fff"></uni-icons><text style="margin-left: 8rpx;">{{ item.Count }}</text>
					</view>
				</view>
		
				<view class="worksInfos" style="display:flex;justify-content:start;align-items: start;" @click="gotoArtiter(item.Publicer.UserID)">
					<view class="worksHeadPic">
						<image :src="item.Publicer.WxHeadPic"></image>
					</view>
					<view class="worksInfo">
						<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: flex-start;">
							<view style="flex:2;">
								<view class="worksName">
									<view style="overflow: hidden;text-overflow: ellipsis;max-width: 150rpx;">{{item.Publicer.NickName}}</view>
									<image v-if="item.Publicer.UserSex == 1" src="@/static/icon/boy.png" style="width:20rpx;height:20rpx;margin-left: 8rpx;"></image>
									<image v-else src="@/static/icon/girl.png" style="width:25rpx;height:25rpx;margin-left: 8rpx;"></image>
								</view>
							</view>
							<view class="artState">
								<view style="font-size:18rpx;" v-if="item.Publicer.isOnline == 1">在线</view>
								<view style="font-size:18rpx;" v-else>
									{{ $common.timeDiff(item.Publicer.onlineTime,new Date()) }}
								</view>
							</view>
						</view>
						<view class="worksLabel">
							<text v-for="(roleitem,roleindex) in item.PublicRoles" :key="roleindex">
								{{ roleitem.LabelName }}
								<text v-if="roleindex < item.PublicRoles.length-1" style="padding: 0 3rpx;">·</text>
								<text v-else style="padding: 0 5rpx;"> | </text>
							</text>
							<text class="artAddr">{{ item.Publicer.UserCity }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="float:right; width:46vw;">
			<view v-for="(item,key) in WorksRightList" :key="key" class="waterfall-item"
				@click="$common.goNavPage('/works/details?WorksID='+item.WorksID)">
		
				<view class="" style="position: relative;">
					<image :src="item.WorksUrls[0]" mode="widthFix" :style="{width:'100%', display: 'block' }"></image>
					<view class=""
						style="position: absolute;bottom: 20rpx;right: 20rpx;padding: 2rpx 12rpx;background-color: rgba(0,0,0,0.4);color:#fff;border-radius: 50rpx;font-size: 20rpx;">
						<uni-icons type="eye" size="12" color="#fff"></uni-icons><text style="margin-left: 8rpx;">{{ item.Count }}</text>
					</view>
				</view>
				<view class="worksInfos" style="display:flex;justify-content:start;align-items: start;" @click="gotoArtiter(item.Publicer.UserID)">
					<view class="worksHeadPic">
						<image :src="item.Publicer.WxHeadPic"></image>
					</view>
					<view class="worksInfo">
						<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: flex-start;">
							<view style="flex:2;">
								<view class="worksName">
									<view style="overflow: hidden;text-overflow: ellipsis;max-width: 150rpx;">{{item.Publicer.NickName}}</view>
									<image v-if="item.Publicer.UserSex == 1" src="@/static/icon/boy.png" style="width:20rpx;height:20rpx;margin-left: 8rpx;"></image>
									<image v-else src="@/static/icon/girl.png" style="width:25rpx;height:25rpx;margin-left: 8rpx;"></image>
								</view>
							</view>
							<view class="artState">
								<view style="font-size:18rpx;" v-if="item.Publicer.isOnline == 1">在线</view>
								<view style="font-size:18rpx;" v-else>
									{{ $common.timeDiff(item.Publicer.onlineTime,new Date()) }}
								</view>
							</view>
						</view>
						<view class="worksLabel">
							<text v-for="(roleitem,roleindex) in item.PublicRoles" :key="roleindex">
								{{ roleitem.LabelName }}
								<text v-if="roleindex < item.PublicRoles.length-1" style="padding: 0 3rpx;">·</text>
								<text v-else style="padding: 0 5rpx;"> | </text>
							</text>
							<text class="artAddr">{{ item.Publicer.UserCity }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		 -->
		<zero-waterfall :list="workslistData"></zero-waterfall>
	</view>
</template>

<script>
	export default {
		name: 'IndexWorks',
		props: {
			workslist: {
				type: [Object, Array],
				default: []
			}
		},
		data() {
			return {
				workslistData: [],
				WorksLeftList: [],
				WorksRightList: [],
			}
		},
		watch: {
			workslist: {
				handler: function(val, old) {
					
					// for (let i = 0; i < val.length; i++) {
					// 	if (!val[i]['url']){
					// 		val[i]['url'] = val[i]['WorksUrls'][0]
					// 	} else {
					// 		if (val[i]['url'] != val[i]['WorksUrls'][0]) {
					// 			val[i]['url'] = val[i]['WorksUrls'][0]
					// 		} 
					// 	}
					// }
					
					console.log('val', val)
					// this.$nextTick(() => {
					this.reset(val);
					// })
				}, 
				deep: true,
				immediate: true
			},
		},
		mounted() {
			this.$nextTick(() => {
				this.reset(this.workslist);
			})
		},
		methods: {
			reset(val) {
				this.workslistData = [];
				// val.forEach(item => {
				// 	console.log(item)
				// 	item['url'] = item['WorksUrls'][0]
				// 	this.workslistData.push(item)
				// 	// Object.keys(item).forEach((itm, idx) => {
				// 	// 	console.log(Object.keys(itm))
				// 	// })
				// })
				this.workslistData = val;
				return;
			
			},
			// imageLoad(wt, lr, e, index) {
			// 	// 当图片加载完成后，获取图片的原始宽度和高度，并根据宽度计算出高度
			// 	const { width, height } = e.detail;
			// 	this.workslist[index]['imgheight'] = (height / width) * 270; // 高度 = 原始高度 / 原始宽度 * 100
			// },
		},
	}
</script>

<style>
	.waterfall {
		padding:20rpx;
	}
	
	.waterfall-item {
		width:auto;height:auto;background:#FFF;padding:15rpx;margin-bottom:20rpx;
		/* 
		width: calc(33.33% - 20px);
		margin: 0 10px;
		box-sizing: border-box;
		overflow: hidden;
		*/
	}
	
	.waterfall-img {
	  width: 100%;
	  height: 100%;
	}
	.worksInfos {
		display: flex;
		justify-content: space-between;
		height:80rpx;
		margin-top:20rpx;
	}
	.worksHeadPic {
		float:left;
		width:50rpx;
		height:50rpx;
		background-color: #CCC;
		/* background-image: url('https://hbimg.huabanimg.com/53392e6876c6a69c39da3a2a63c3a62ed4f9d26d23a781-4ckBVh_fw658'); */
		background-position: center;
		background-size: cover;
		border-radius: 40rpx;
		margin-top: 10rpx;
	}
	.worksHeadPic image {
		width:50rpx;
		height:50rpx;
		border-radius: 50rpx;
	}
	.worksInfo {
		width:80vw;
		margin-left:10rpx;
	}
	.worksName {
		/* font-size:24rpx; */
		font-size:22rpx;
		display:inline-block;
		vertical-align:middle;
		line-height:1.2;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		
	}
	.worksLabel {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		font-size:18rpx;
		color:#999;
		margin-top:5rpx;
	}
	.artState {
		/* width:100rpx; */
		flex: 1;
		float:right;
		text-align: right;
		color:#999;
		font-size:24rpx;
	}
</style>